//页面加载就会发送请求,所以需要写在load事件中
window.addEventListener("load", async () => {
  try {
    //发送axios请求
    const res = await axios({
      url: "/dashboard",
      //在请求头信息中注入token,headers中的数据会被放在请求头信息中
      // headers: {
      //   //authorization 首字母不区分大小写
      //   //本地存储中获取token
      //   Authorization: localStorage.getItem("token"),
      //   // authorization: localStorage.getItem("token"),
      // },
    });
    console.log(res.data); //是个对象
    //解构对象
    const { year, groupData, salaryData, provinceData } = res.data;
    console.log(year);
    console.log(groupData);
    console.log(salaryData); //是个数组

    // console.log(res); //是个对象

    // console.log(res.data.data.overview);

    //显示预览区域的数据
    const data = res.data.overview; //得到的是一个对象
    // console.log(data);
    //因为要将对象中的值渲染到多个dom元素中,所以需要循环遍历
    //遍历对象
    for (const k in data) {
      document.querySelector(`[name="${k}"]`).innerHTML = data[k];
    }

    //封装薪资走势函数
    function salaryEcharts(year) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#line"));
      const option = {
        title: {
          text: "2022全学科薪资走势",
          left: "2%",
          top: "2%",
        },
        xAxis: {
          type: "category",
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: 2,
              type: "dashed",
            },
          },
        },

        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: "10",
            lineStyle: {
              width: 5,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#69aefa", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["#77bcfb"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salaryEcharts(year);

    //班级薪资分布
    function salarysplit(salaryData) {
      var myChart = echarts.init(document.querySelector("#salary"));
      const option = {
        title: {
          text: "班级薪资分布",
          left: "2%",
          top: "2%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "班级薪资分布",
            type: "pie",
            radius: ["40%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },

            data: salaryData.map((item) => {
              // console.log(item); //是个对象
              return {
                value: item.b_count + item.g_count,
                name: item.label,
              };
            }),
            // [
            //   { value: 108, name: salaryData[0].label },
            //   { value: 735, name:salaryData[1].label },
            //   { value: 580, name: salaryData[2].label},
            //   { value: 484, name: salaryData[3].label},
            // ],
          },
        ],
        color: ["#f1a445", "#5f99f7", "#6accfa", "#69cf9e"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salarysplit(salaryData);

    //小组薪资走势分布图
    function salaryGroup(groupData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#lines"));
      const option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: 2,
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4cdba9", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#d0f4e8", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#59a4ed", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#d4e6fc", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //点击切换数据
      //点击第几组  就会将对应的组号渲染到页面中
      //先获取元素
      const btns = document.querySelectorAll("#btns button"); //是个伪数组,但是伪数组有forEach方法
      //给元素注册点击事件,因为有多个元素,所以需要遍历
      btns.forEach((dom) => {
        dom.addEventListener("click", function () {
          //排他思想,干掉所有高亮的类名,保留自己的类名
          document
            .querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
          //给自己加上
          this.classList.add("btn-blue");
          // console.log(this);//这里的this指向的是每个dom元素
          //这个索引就代表了当前点击了哪个dom元素,点击了哪个组
          const index = this.innerHTML.trim();
          option.xAxis.data = groupData[index].map((v) => v.name);
          option.series[0].data = groupData[index].map((v) => v.hope_salary);
          option.series[1].data = groupData[index].map((v) => v.salary);
          myChart.setOption(option);
        });
      });

      // 测试
      // setTimeout(() => {
      //   option.xAxis.data = groupData[2].map((v) => v.name);
      //   option.series[0].data = groupData[2].map((v) => v.hope_salary);
      //   option.series[1].data = groupData[2].map((v) => v.salary);
      //   myChart.setOption(option);
      // }, 3000);
    }
    salaryGroup(groupData);

    //男女薪资分布图
    function boyGirlSalary(salaryData) {
      var myChart = echarts.init(document.querySelector("#gender"));

      const option = {
        title: [
          {
            text: "男女薪资分布",
            left:'2%',
            top:'2%'
          },
          {
            subtext: "男生",
            left: "50%",
            top: "45%",
            textAlign: "center",
          },
          {
            subtext: "女生",
            left: "50%",
            top: "85%",
            textAlign: "center",
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["18%", "25%"],
            center: ["50%", "30%"],
            itemStyle:{
             normal:{
               labelLine:{
                 length:5
               }
             }
           },
            data: [
              {
                name: "1万以下",
                value: 108,
              },
              {
                name: "1-1.5万",
                value: 735,
              },
              {
                name: "1.5-2万",
                value: 580,
              },
              {
                name: "2万以上",
                value: 484,
              },
            ],
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
            // left: "33.3333%",
            // right: "33.3333%",
            top: 0,
            // bottom: 0,
          },
          {
            type: "pie",
            radius: ["18%", "25%"],
            center: ["50%", "70%"],
            itemStyle:{
             normal:{
               labelLine:{
                 length:1
               }
             }
           },
            data: [
              {
                name: "1万以下",
                value: 108,
              },
              {
                name: "1-1.5万",
                value: 735,
              },
              {
                name: "1.5-2万",
                value: 580,
              },
              {
                name: "2万以上",
                value: 484,
              },
            ],
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
            // left: "33.3333%",
            // right: "33.3333%",
            top: 0,
            // bottom: 0,
          },
        ],
        color: ["#f1a445", "#5f99f7", "#6accfa", "#69cf9e"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    boyGirlSalary(salaryData);

    //地图模块
    const initMapChart = (provinceData) => {
      const myEchart = echarts.init(document.querySelector("#map"));
      const dataList = [
        { name: "南海诸岛", value: 0 },
        { name: "北京", value: 0 },
        { name: "天津", value: 0 },
        { name: "上海", value: 0 },
        { name: "重庆", value: 0 },
        { name: "河北", value: 0 },
        { name: "河南", value: 0 },
        { name: "云南", value: 0 },
        { name: "辽宁", value: 0 },
        { name: "黑龙江", value: 0 },
        { name: "湖南", value: 0 },
        { name: "安徽", value: 0 },
        { name: "山东", value: 0 },
        { name: "新疆", value: 0 },
        { name: "江苏", value: 0 },
        { name: "浙江", value: 0 },
        { name: "江西", value: 0 },
        { name: "湖北", value: 0 },
        { name: "广西", value: 0 },
        { name: "甘肃", value: 0 },
        { name: "山西", value: 0 },
        { name: "内蒙古", value: 0 },
        { name: "陕西", value: 0 },
        { name: "吉林", value: 0 },
        { name: "福建", value: 0 },
        { name: "贵州", value: 0 },
        { name: "广东", value: 0 },
        { name: "青海", value: 0 },
        { name: "西藏", value: 0 },
        { name: "四川", value: 0 },
        { name: "宁夏", value: 0 },
        { name: "海南", value: 0 },
        { name: "台湾", value: 0 },
        { name: "香港", value: 0 },
        { name: "澳门", value: 0 },
      ];

      //处理数据
      provinceData.forEach((item) => {  //得到的是每个数组项
        dataList.find((v) => { //因为dataList是个数组,通过find方法可以查询某个元素是否包含在某个元素中
          if (item.name.indexOf(v.name) !== -1) {  //因为item.name是XX省,而v.name是XX,比item.name少一个省字,所以需要通过indexOf方法检测某个字符串中是否包含另一个字符串的信息,indexOf方法中如果不包含返回的是-1,所以上来要先判断不等于-1的时候,说明item.name包含了v.name,将item.value直接赋值给v.value
            v.value = item.value;
          }
        });
      });

      let option = {
        title: {
          text: "籍贯分布",
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} 位学员",
          borderColor: "transparent",
          backgroundColor: "rgba(0,0,0,0.5)",
          textStyle: {
            color: "#fff",
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: "left",
          bottom: "20",
          text: ["6", "0"],
          inRange: {
            color: ["#ffffff", "#0075F0"],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              color: "#e0ffff",
            },
            emphasis: {
              areaColor: "#34D39A",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "籍贯分布",
            type: "map",
            geoIndex: 0,
            data: dataList,
          },
        ],
      };
      myEchart.setOption(option);
    };
    initMapChart(provinceData);
  } catch (err) {
    console.dir(err);
  }
});
